<template>
  <div style="overflow:hidden;" v-loading="menuLoading">
    <div class="box w1200">
      <div class="topBox betweens">
        <div class="logoBox">
          <img src="./assets/img/xnkt.png" alt="">
        </div>
        <sel></sel>
      </div>
    </div>
    <div class="indexBj">
      <img src="./assets/img/bj.png" alt="">
    </div>
    <indexTopMenu></indexTopMenu>
    <div class="indexInner1 betweens">
      <div v-for="(item,index) in menuArr" class="indexCon1" :key="index" @click="xnktClick(item)">
        <div class="indexImgBox">
          <img :src="item.iconPc" alt="">
        </div>
        <div class="indexText1">
          <p>{{item.label}}</p>
          <div>{{item.label}}</div>
        </div>
      </div>
    </div>
    <div><img src="./assets/img/jxkt.png" style="width: 110px;margin: 35px 0 15px;" alt=""></div>
    <div class="indexList mb15" v-loading='jxkcLoading'>
      <div class="indexItem" style="height:368px" v-for="(item,index) in jpkcArr" :key="index" @mouseover="mouseoverDetails(item)" @mouseleave="mouseleaveDetails(item)">
        <div v-if="!item.showDetails">
          <div class="imgbox" @click="spxqClick(item.id)">
            <img :src="item.headUrl" alt="" srcset="" class="indexImg"/>
            <span class="time">{{item.videoDuration}}</span>
          </div>
          <div class="indexCon">
            <h3>{{item.videoTitle}}</h3>
            <div class="starts" style="margin-bottom:10px;">
              <div class="indexText2">精选课程</div>
              <div class="indexText3 rqzjText1" style="max-width:165px;margin-top:0;">{{item.classifyNames}}</div>
            </div>
            <el-row>
              <el-col :span="12" class="col1">{{item.videoPlayCount}}次观看</el-col>
              <el-col :span="12" class="col2">
                <el-button style="background:#26840C;color:white;border-radius:25px;" size='small'  @click="watchVideosNow">立即观看</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="showDetails" style="height:100%" v-else @click="spxqClick(item.id)">
          <details-control :detailData="detailData"></details-control>
        </div>
      </div>
    </div>
    <div class="indexInner2">
      <div style="width:720px;float:left;" v-loading='zxkcLoading'>
        <!-- <div class="betweens"> -->
        <h2>最新课程</h2>
          <!-- <div style="cursor:pointer;color:#8a8989;position: relative;top: 10px;" @click="xnktClick()">更多</div> -->
        <!-- </div> -->
        <div class="indexList2">
          <div class="indexItem2" v-for="(item,index) in zxkcArr" :key="index" @click="spxqClick(item.id)">
            <div class="imgbox2">
              <img :src="item.headUrl" alt="" srcset="" class="indexImg"/>
              <span class="time">{{item.videoDuration}}</span>
            </div>
            <div class="indexCon">
              <h3>{{item.videoTitle}}</h3>
              <el-row>
                <el-col :span="12" class="col3">讲师：{{item.authorName===null||item.authorName===''?'乡农学院':item.authorName}}</el-col>
                <el-col :span="12" class="col4">{{item.videoPlayCount}}次观看</el-col>
              </el-row>
              <div class="indexText3 rqzjText1" style="max-width:165px;margin-top:7px;">{{item.classifyNames}}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="width:465px;margin-left:15px;float:left;">
        <h2>人气专家</h2>
        <div class="homeExBox betweens" v-for="(item,index) in rqzjArr" :key="index" @click="gotoview(item.id)">
          <div class="rqzjInner1" :style="{'backgroundImage':'url('+bg+')'}">
            <img :src="item.publicityPhotos" alt="" srcset="" class='eImg'/>
          </div>
          <div class="homeExInner2" style="width:400px;">
            <h4>{{item.expertName}}</h4>
            <div class="rqzjExText1">{{item.field}}</div>
            <div class="homeExBottom betweens">
              <div class="indexText3 rqzjText1">{{item.field}}</div>
              <div class="indexText4">进入主页</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h2>系列课程</h2>
    <div class="indexList mb15" v-loading='xlkcLoading'>
      <div class="indexItem" v-for="(item,index) in xlkcArr" :key="index" @click="spxqClick(item.id)">
        <div class="imgbox">
          <img :src="item.headUrl" alt="" srcset="" class="indexImg"/>
          <span class="time">{{item.videoDuration}}</span>
        </div>
        <div class="indexCon">
          <div style="font-size:17px;font-weight:bold;margin-bottom:10px;">{{item.videoTitle}}</div>
          <div style="margin-bottom:10px;max-width:165px;margin-top:7px;" class="indexText3 rqzjText1">{{item.classifyNames}}</div>
          <div style="color:#ccc;padding-left:10px;margin-bottom:10px;" class="xlkcExText1">{{item.videoContent}}</div>
          <el-row>
            <el-col :span="12" class="col1">{{item.pubDate}}</el-col>
            <el-col :span="12" class="col2">
              <el-button style="background:white;color:#26840C;border-radius:5px;border:1px solid #26840C;" size='small'>查看专题</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="indexInner2" v-loading='gzkcLoading'>
      <div style="width:720px;float:left;">
        <h2>高赞课程</h2>
        <div class="indexList2">
          <div class="indexItem2" v-for="(item,index) in gzkcArr" :key="index" @click="spxqClick(item.id)">
            <div class="imgbox2">
              <img :src="item.headUrl" alt="" srcset="" class="indexImg"/>
              <span class="time">{{item.videoDuration}}</span>
            </div>
            <div class="indexCon">
              <h3>{{item.videoTitle}}</h3>
              <el-row>
                <el-col :span="12" class="col3">讲师：{{item.authorName===null||item.authorName===''?'乡农学院':item.authorName}}</el-col>
                <el-col :span="12" class="col4">{{item.videoPlayCount}}次观看</el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div style="width:465px;margin-left:15px;float:left;" v-loading='zjtjLoading'>
        <div class="betweens">
          <h2>专家推荐</h2>
          <div style="cursor:pointer;color:#8a8989;position: relative;top: 10px;">专家倾情推荐，一定不可错过的优质课程</div>
        </div>
        <div class="homeZjBox betweens" v-for="(item,index) in zjtjArr" :key="index" @click="spxqClick(item.id)">
          <div class="homeZjInner1">
            <img :src="item.authorHeadUrl" alt="" srcset="" class='eImg'/>
            <div style="text-align:center;margin-top:10px;">{{item.authorName}}</div>
          </div>
          <div class="homeZjInner2">
            <div style="font-size:17px;font-weight:bold;">{{item.videoTitle}}</div>
            <div class="indexText3 rqzjText1">{{item.classifyNames}}</div>
            <div class="homeExBottom betweens">
              <div class="homeZjText1">{{item.pubDate}}</div>
              <div class="homeZjText1">{{item.videoPlayCount}}次观看</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="indexInner2">
      <div style="width:720px;float:left;" v-loading='xnwdLoading'>
        <div class="betweens">
          <h2>乡农问答</h2>
          <div style="cursor:pointer;color:#8a8989;position: relative;top: 10px;" @click="xnwdClick()">更多</div>
        </div>
        <div class="typeGroup">
          <div class="typeList" v-for="(item,index) in typeList" :key="index" @click="typeGroupClick(index,item.id)">
            <el-button :type="typeGroupIndex==index?'primary':'text'" :style="{background:typeGroupIndex==index?'#26840C':'white'}" round size="mini">{{item.labelName}}</el-button>
          </div>
        </div>
        <div class="questionAnswerContent">
          <div class="questionAnswerList" v-for="(item,index) in questionAnswerList" :key="index">
            <div class="topping" v-show="item.whetherToTop">
              <span v-show="item.topFlag===1">置顶</span>
            </div>
            <div class="questionAnswerTitle">
              <i class="el-icon-question" style="color:#3396f6;font-size:20px"></i>
              <span>{{item.qtitle}}</span>
            </div>
            <div class="titleInformation">
              <span style="color:#999999;">{{item.createDate}}</span>
              <div class="statistics">
                <span>{{item.readNum===null?0:item.readNum}}人阅读</span>
                <span>{{item.interestNum===null?0:item.interestNum}}人关注</span>
              </div>
            </div>
            <div class="expertInformation" v-if="item.allAnswerList.length!==0">
              <div class="expertAvatar">
                <img v-if="item.allAnswerList[0].tbExpertDTO.publicityPhotos===null" src="./assets/img/zjtj.png" alt="">
                <img v-else :src="item.allAnswerList[0].tbExpertDTO.publicityPhotos" alt="">
              </div>
              <div class="expertIntroduction">
                <div class="expertName">
                  <span>{{item.allAnswerList[0].tbExpertDTO.expertName}}</span>
                  <span v-html="item.allAnswerList[0].acontent" class="xnwdText1"></span>
                </div>
              </div>
            </div>
            <div v-else style="text-align:center;color:#ccc;margin:29px 0;">暂无回答</div>
            <div class="favoriteLikes" v-if="item.allAnswerList.length!==0">
              <div class="favoriteLikesGroup">
                <div class="collection" @click.stop="collectOrNiceAnswer(item.allAnswerList[0].id,0,item.allAnswerList[0].collectFlag)">
                  <img :src="item.allAnswerList[0].collectFlag===0? require('./assets/img/collection1.png'):require('./assets/img/collection2.png')" style="width:20px" alt="">
                  <span :style="{color:item.allAnswerList[0].collectFlag===0?'#AAAAAA':'#f59a23'}">{{item.allAnswerList[0].collectNum===null?0:item.allAnswerList[0].collectNum}}</span>
                </div>
                <div class="likesNumber" @click.stop="collectOrNiceAnswer(item.allAnswerList[0].id,1,item.allAnswerList[0].niceFlag)">
                  <img :src="item.allAnswerList[0].niceFlag===0?require('./assets/img/fabulous1.png'):require('./assets/img/fabulous2.png')" style="width:20px" alt="">
                  <span :style="{color:item.allAnswerList[0].niceFlag===0?'#AAAAAA':'#f59a23'}">{{item.allAnswerList[0].niceNum===null?0:item.allAnswerList[0].niceNum}}</span>
                </div>
              </div>
              <div class="more">
                <el-button type="text" style="color:#26840C" @click="questionAnswerListClick(item.allAnswerList[0].qid)">查看更多＞</el-button>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
      <div style="width:465px;margin-left:15px;float:left;" v-loading='rmphLoading'>
        <div style="height:40px;"></div>
        <div class="homeZjBox">
          <div style="font-size:17px;font-weight:bold;margin-bottom:20px;">热门排行</div>
          <div class="betweens" style="margin-bottom:20px;" v-for="(item,index) in rmphArr" :key="index" @click="spxqClick(item.id)">
            <div class="homePhInner1">
              <img :src="item.headUrl" alt="" srcset="" class='eImg'/>
            </div>
            <div class="homePhInner2">
              <div style="font-size:17px;font-weight:bold;">{{item.videoTitle}}</div>
              <div class="indexText3 rqzjText1">{{item.classifyNames}}</div>
              <div class="homeExBottom betweens">
                <div class="homeZjText1">{{item.pubDate}}</div>
                <div class="homeZjText1">{{item.videoPlayCount}}次观看</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <img style="cursor:pointer;" src="./assets/img/ljzx.png" @click="consultImmediately()" alt="" srcset="" class='eImg'/>
        </div>
      </div>
    </div>
    <div style="margin:20px 0;">
      <img style="width:1200px;" src="./assets/img/zjBanner.jpg" alt="" srcset="" class='eImg'/>
    </div>
    <div class="expertList">
      <div class="expertItem" v-for="(item,index) in zjfcArr" :key="index" @click="gotoview(item.id)">
        <div class="eImgbox" :style="{'backgroundImage':'url('+bg+')'}"><img :src="item.publicityPhotos" alt="" srcset="" class='eImg'/></div>
        <div class="eBox">
          <el-row>
            <el-col :span="8" class="namefl">{{item.expertName}}</el-col>
            <el-col :span="16" class="namefr rqzjText1">{{item.field}}</el-col>
          </el-row>
          <p class="intro">
            {{item.introduce}}
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <video id="video" controls width="100%" height="480" autoplay>
        <source src="./assets/video/banner.mp4" type="video/mp4">
      </video>
    </el-dialog>
    <div class="totop___1GnzG">
      <div class="totop_item___1AA1S">
        <div>
          <div class="ant-image" style="width:45px;border-radius:30px;overflow:hidden;">
            <img class="ant-image-img" v-if="userInfo!==undefined&&userInfo.headUrl!==''" :src="userInfo.headUrl">
            <img class="ant-image-img" v-else src="./assets/img/zjtj.png">
          </div>
        </div>
        <div class="item_title___3rGZF" v-if="userInfo!==undefined&&userInfo.username!==''">{{userInfo.username}}</div>
        <div class="item_title___3rGZF" v-else>用户名</div>
      </div>
      <div class="totop_item___1AA1S" @click="myCenterClick">
        <div>
          <div class="ant-image">
            <img class="ant-image-img" src="./assets/img/myCenter.png">
          </div>
        </div>
        <div class="item_title___3rGZF">个人中心</div>
      </div>
      <div class="totop_item___1AA1S" @click="msgCenterClick">
        <div>
          <div class="ant-image" v-if="msgNum===0">
            <img class="ant-image-img" src="./assets/img/msgCenter.png">
          </div>
          <el-badge v-else :value="msgNum" :max="99" class="item">
            <div class="ant-image">
              <img class="ant-image-img" src="./assets/img/msgCenter.png">
            </div>
          </el-badge>
        </div>
        <div class="item_title___3rGZF">消息中心</div>
      </div>
    </div>
    <loginDia v-if="isloginDia" ref="loginRefs" @query="login"></loginDia>
  </div>
</template>

<script>
import sel from './components/sel2'
import loginDia from './components/loginDia'
import indexTopMenu from './indexCom/indexTopMenu'
import detailsControl from './indexCom/details'
import Cookies from 'js-cookie'
import { dataJson1, dataJson2, dataJson3, btnArr, dataJson, dataJson4, dataJson5, dataJson6 } from './data'
export default {
  data () {
    return {
      detailData: {},
      btnArr,
      dataJson1,
      dataJson2,
      dataJson3,
      dataJson4,
      dataJson5,
      dataJson6,
      dataJson,
      questionAnswerList: [],
      typeGroupIndex: 0,
      dialogVisible: false,
      bg: require('./assets/img/rect.png'),
      typeList: [],
      msgNum: 0,
      rqzjArr: [],
      zjfcArr: [],
      xnwdLoading: false,
      jpkcArr: [],
      jxkcLoading: false,
      zxkcArr: [],
      zxkcLoading: false,
      xlkcArr: [],
      xlkcLoading: false,
      gzkcArr: [],
      gzkcLoading: false,
      zjtjArr: [],
      zjtjLoading: false,
      rmphArr: [],
      rmphLoading: false,
      menuArr: [],
      menuLoading: false,
      isloginDia: false,
      userInfo: undefined,
      studyToken: undefined
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
  },
  components: { sel, detailsControl, indexTopMenu, loginDia },
  methods: {
    init () {
      // this.login()
      this.rqZjList()
      this.zjfcList()
      this.getAllLabelList()
      this.getPerfectWebPage()
      this.getLatestWebPage()
      this.getHeightColletionsWebPage()
      this.getHeightLikesWebPage()
      this.getRecommendWebPage()
      this.getHotWebPage()
      this.getFirstTypesHot()
      let studyToken = Cookies.get('studyToken')
      this.studyToken = studyToken
      if (studyToken !== undefined) {
        this.getUserList()
      }
    },
    isLogin () {
      this.isloginDia = true
      this.$nextTick(() => {
        this.$refs.loginRefs.init()
      })
    },
    // 登录获取token
    login (token) {
      this.isloginDia = false
      let obj = {
        token
      }
      this.$http.post(`/api/auth/login`, obj).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.$message.success('登录成功！')
        Cookies.set('studyToken', res.data.token)
        this.getUserList()
      }).catch(() => { })
    },
    // 获取用户信息
    getUserList () {
      this.$http.get(`/sys/user/infofromdb`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.userInfo = res.data
      }).catch(() => { })
    },
    xnwdClick () {
      this.$router.push({
        name: 'questionAnswer'
      })
    },
    typeGroupClick (index, id) {
      this.typeGroupIndex = index
      this.lId = id
      this.getPageMH()
    },
    questionAnswerListClick (qid) {
      this.$router.push({ name: 'rfquestionAnswer', query: { qid } })
    },
    gotoview (id) {
      this.$router.push({
        name: 'expertview',
        query: {
          id
        }
      })
    },
    watchVideosNow () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    lxzjClick () {
      this.$router.push({
        name: 'experts'
      })
    },
    spxqClick (id) {
      this.$router.push({
        name: `classroomview`,
        query: { id }
      })
    },
    xnktClick (item) {
      this.$router.push({
        name: 'classroom',
        query: { id: item.value, value: JSON.stringify(item) }
      })
    },
    consultImmediately () {
      this.$router.push({ name: 'consultingService' })
    },
    // 移入事件
    mouseoverDetails (val) {
      this.detailData = val
      val.showDetails = true
    },
    // 移出事件
    mouseleaveDetails (val) {
      val.showDetails = false
    },
    // 点击个人中心
    myCenterClick () {
      if (this.studyToken === undefined) {
        this.isLogin()
        return false
      }
      this.$router.push({ name: 'perCenter', query: { type: 0 } })
    },
    // 点击消息中心
    msgCenterClick () {
      if (this.studyToken === undefined) {
        this.isLogin()
        return false
      }
      this.allRead()
      this.$router.push({ name: 'perCenter', query: { type: 4 } })
    },
    // 获取消息未读数量
    getMsgNum () {
      this.$http.get(`/xnkt/tbnewsuser/unread`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.msgNum = res.data
      }).catch(() => {})
    },
    // 全部已读
    allRead () {
      this.$http.get(`/xnkt/tbnewsuser/allLabelRead`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.getDataList(1)
      }).catch(() => {})
    },
    // 获取人气专家列表
    rqZjList () {
      this.$http.get(`/xnkt/tbexpert/getPopularityExperts`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.rqzjArr = res.data
      }).catch(() => {})
    },
    // 获取专家风采列表
    zjfcList () {
      let params = {
        orderField: 'expertSort',
        order: 'asc',
        isDisplay: '01',
        page: 1,
        limit: 50
      }
      this.$http.get(`/xnkt/tbexpert/page`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.zjfcArr = res.data.list
      }).catch(() => {})
    },
    // 获取标签
    getAllLabelList () {
      this.xnwdLoading = true
      this.$http.get(`xnkt/tblabel/getAllLabelList`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.xnwdLoading = false
          return this.$message.error(res.msg)
        }
        let arr = res.data
        arr = arr.splice(0, 6)
        arr.unshift({ labelName: '全部', id: null })
        this.typeList = arr
        this.lId = arr[0].id
        this.getPageMH()
      }).catch(() => { this.xnwdLoading = false })
    },
    // 获取问答列表数据
    getPageMH () {
      this.xnwdLoading = true
      let params = {
        orderType: '0',
        page: this.page,
        limit: 6,
        qContent: '',
        startDate: '',
        endDate: '',
        lId: this.lId
      }
      this.$http.get(`/xnkt/tbquestionkt/pageMH`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.xnwdLoading = false
          return this.$message.error(res.msg)
        }
        this.questionAnswerList = res.data.list
        this.xnwdLoading = false
      }).catch(() => { this.xnwdLoading = false })
    },
    // 切换点赞收藏
    collectOrNiceAnswer (id, type, optType) {
      this.xnwdLoading = true
      if (optType === 0) {
        optType = 1
      } else {
        optType = 0
      }
      this.$http.get(`/xnkt/tbquestionkt/collectOrNiceAnswer/${id}/${type}/${optType}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.xnwdLoading = false
          return this.$message.error(res.msg)
        }
        this.getPageMH()
      }).catch(() => { this.xnwdLoading = false })
    },
    // 获取精选课程
    getPerfectWebPage () {
      this.jxkcLoading = true
      let params = {
        page: 1,
        limit: 4
      }
      this.$http.get(`/web/video/getPerfectWebPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.jxkcLoading = false
          return this.$message.error(res.msg)
        }
        let arr = res.data.list
        for (let i in arr) {
          arr[i]['showDetails'] = false
        }
        this.jpkcArr = arr
        this.jxkcLoading = false
      }).catch(() => { this.jxkcLoading = false })
    },
    // 获取最新课程
    getLatestWebPage () {
      this.zxkcLoading = true
      let params = {
        page: 1,
        limit: 6
      }
      this.$http.get(`/web/video/getLatestWebPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.zxkcLoading = false
          return this.$message.error(res.msg)
        }
        this.zxkcArr = res.data.list
        this.zxkcLoading = false
      }).catch(() => { this.zxkcLoading = false })
    },
    // 获取系列课程
    getHeightColletionsWebPage () {
      this.xlkcLoading = true
      let params = {
        page: 1,
        limit: 4
      }
      this.$http.get(`/web/video/getHeightColletionsWebPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.xlkcLoading = false
          return this.$message.error(res.msg)
        }
        this.xlkcArr = res.data.list
        this.xlkcLoading = false
      }).catch(() => { this.xlkcLoading = false })
    },
    // 获取高赞课程
    getHeightLikesWebPage () {
      this.gzkcLoading = true
      let params = {
        page: 1,
        limit: 6
      }
      this.$http.get(`/web/video/getHeightLikesWebPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.gzkcLoading = false
          return this.$message.error(res.msg)
        }
        this.gzkcArr = res.data.list
        this.gzkcLoading = false
      }).catch(() => { this.gzkcLoading = false })
    },
    // 获取专家推荐
    getRecommendWebPage () {
      this.zjtjLoading = true
      let params = {
        page: 1,
        limit: 4
      }
      this.$http.get(`/web/video/getRecommendWebPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.zjtjLoading = false
          return this.$message.error(res.msg)
        }
        this.zjtjArr = res.data.list
        this.zjtjLoading = false
      }).catch(() => { this.zjtjLoading = false })
    },
    // 获取热门排行
    getHotWebPage () {
      this.rmphLoading = true
      let params = {
        page: 1,
        limit: 5
      }
      this.$http.get(`/web/video/getHotWebPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.rmphLoading = false
          return this.$message.error(res.msg)
        }
        this.rmphArr = res.data.list
        this.rmphLoading = false
      }).catch(() => { this.rmphLoading = false })
    },
    // 获取顶部菜单
    getFirstTypesHot () {
      this.menuLoading = true
      this.$http.get(`/web/video/getFirstTypesHot/5`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.menuLoading = false
          return this.$message.error(res.msg)
        }
        this.menuArr = res.data
        this.menuLoading = false
      }).catch(() => { this.menuLoading = false })
    }
  }
}
</script>
<style lang="scss" src="./index.scss" scoped></style>
